Vue.component("hot-song", {
    template: `
      <!-- 这个是模板名 -->
      <div class="hot-song">
                    <div class="ban">
                        <div class="pic">
                            <!-- 调用计算属性计算时间 -->
                            <span>更新时间:{{time}}</span>
                        </div>
                    </div>
                    <!-- 修改部分 -->
                    <!-- 音乐列表 -->
                    <div class="music-list">
                        <ul class="music-ul">
                            <li v-for=" (item,index) in musiclist" @click="$emit('play',item)">
                                <!-- 使用三目运算补零 -->
                                <div :class="{num:true,col:index<3}">{{(index+1) < 10 ? '0' + (index+1) : index+1}}</div>
                                <div class="left">
                                    <h5>{{item.name}}</h5>
                                    <i v-if="item.maxbr>32000"></i>
                                    <span v-for="gs in item.artists">{{gs.name}}</span><span>-{{item.name}}</span>
                                </div>
                                <div class="right">
                                    <button></button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
    `,
    props: ['musiclist', 'time']
    ,
    data() {
        return {

        }
    },

    // computed:{
    //     time(){
    //         var day = new Date();
    //         var month = day.getMonth()+1;
    //         var date = day.getDate();
    //         return `${month<10?'0'+month:month}月${date}日`;
    //     }
    // }

})